<template>
	<view class="header dis-jc-b">
		<view class="dis">
			<view class="dis-fc title-bg">
				<text class="time">{{ formattedTime }}</text>
				<text class="title" @click="homeClick">致丰负载箱测试系统</text>
			</view>
			<view class="dis">
				<view class="menu" v-for="(item,index) in muen" :key="index">
					<text @click="menuClick(item)"
						:class="{'active': menuSelect === item}">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="user-info dis-ai">
			<image src="../static/logo.png" class="avatar" mode="aspectFit"></image>
		<text>admin</text></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onBeforeUnmount } from 'vue'
	const muen = ["三相电", "功率", "报表"]
	const props = defineProps({
		menuSelect: {
			type: String,
			default: ''
		}
	})

	const homeClick = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	const selectedItem = ref('')
	const menuClick = (item) => {
		selectedItem.value = item

		if (item == "报表") {
			uni.navigateTo({
				url: '/pages/report/report'
			})
		} else if (item == '功率') {
			uni.navigateTo({
				url: '/pages/power/power'
			})
		}else if(item=='三相电'){
			uni.navigateTo({
				url:'/pages/t_power/t_power'
			})
		}
	}
	const formattedTime = ref('')
	let timer : number | null = null

	const updateTime = () => {
		const now = new Date()
		const year = now.getFullYear()
		const month = String(now.getMonth() + 1).padStart(2, '0')
		const day = String(now.getDate()).padStart(2, '0')
		const hours = String(now.getHours()).padStart(2, '0')
		const minutes = String(now.getMinutes()).padStart(2, '0')
		const seconds = String(now.getSeconds()).padStart(2, '0')

		formattedTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
	}

	onMounted(() => {
		updateTime()
		timer = setInterval(updateTime, 1000)
	})

	onBeforeUnmount(() => {
		if (timer) clearInterval(timer)
	})
</script>

<style scoped lang="scss">
	.header {
		color: #fff;
		// padding: 12px 24px;
		// background: linear-gradient(90deg, #1e3c72, #2a5298);


		.title-bg {
			background-image: url('../static/bg-top.png');
			background-size: 100% 100%;
			width: 380px;
			padding: 8px 14px;

			.time {
				font-size: 14px;
				opacity: 0.8;
			}

			.title {
				font-size: 24px;
				font-weight: bold;
				background: linear-gradient(to right, #1566e9, #c471ed, #f64eee);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}
		}

		.menu {
			padding: 16px;
		}

		.user-info {
			height: 24px;
			margin-right: 24px;

			.avatar {
				margin-right: 8px;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				border: 2px solid rgba(255, 255, 255, 0.3);
			}
		}

	}
</style>